<template>
	<u-mask class="mask" :zoom="false" :show="props.isShow"
		:custom-style="{ height: tools.clientTopHight(), bottom: '100rpx', top: 'auto' }" @click="emit('close', false)">
		<view class="content">
			<view class="header">
				分享
				<image class="close" src="/pagesA/static/image/28.png"></image>
			</view>
			<view class="bottom flex-space-between" @click.stop>
				<view class="item flex-direction-column">
					<image src="/pagesA/static/image/35.png"></image>
					<text>微信好友</text>
					<button class="button" open-type="share" @click="shareWx()"></button>

				</view>
				<view class="item flex-direction-column" @click="emit('poster', true)">
					<image src="/pagesA/static/image/34.png"></image>
					<text>生成海报</text>
				</view>
			</view>
		</view>
	</u-mask>
</template>

<script setup lang="ts">
	import tools from '@/utils/tools'
	import {nextTick} from 'vue'
	const emit = defineEmits(['close', 'poster','shareWx'])
	const props = defineProps({
		isShow: {
			type: Boolean,
			default() {
				return false
			}
		}
	})
	const shareWx = () => {
		emit('shareWx', false);
	 


	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		bottom: 0;
		position: absolute;
		background-color: #fff;
	}

	.header {
		width: 100%;
		height: 76rpx;
		color: #333333;
		font-size: 32rpx;
		line-height: 76rpx;
		position: relative;
		text-align: center;
		background-color: #eeeeee;
		border-radius: 10rpx 10rpx 0px 0px;

		.close {
			top: 30rpx;
			right: 38rpx;
			width: 20rpx;
			height: 20rpx;
			position: absolute;
		}
	}

	.bottom {
		margin: 54rpx 120rpx;

		.item {
			position: relative;
			align-items: center;
			justify-content: center;

			.button {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				border: none;
				position: absolute;
				background-color: transparent;
			}

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				height: 36rpx;
				font-size: 28rpx;
				line-height: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}
		}
	}
</style>